<template>
    <topMenu ref="rightMenuRef"></topMenu>
    <div class="wrapper-box">
        <el-tabs v-model="activeName" class="demo-tabs" stretch @tab-click="handleClick">
            <el-tab-pane label="个人资料" name="first">
                <el-card class="box-card flex justify-center">
                    <el-form class="padding-top" label-width="120px" style="width:400px;">
                        <el-form-item label="用户名">
                            {{ userMsg.username }}
                        </el-form-item>
                        <el-form-item label="手机号">
                            {{ userMsg.mobile }}
                        </el-form-item>
                        <el-form-item label="昵称">
                            <div class="flex align-center">
                                <span v-if="!editNickName">{{ userMsg.nickname }}</span>
                                <el-input v-if="editNickName" v-model="userMsg.nickname" style="width:150px"/>
                                <el-link v-if="!editNickName" :underline="false" class="margin-left-xs" type="primary"
                                         @click="editNickName=true">修改
                                </el-link>
                                <el-link v-if="editNickName" :underline="false" class="margin-left-xs" type="primary"
                                         @click="editNickName=false">确定
                                </el-link>
                            </div>
                        </el-form-item>
                        <el-form-item label="剩余绘画次数">
                            {{ userMsg.draw_count }}
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="handleEdit">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="充值中心" name="second">
                <el-card class="box-card flex justify-center padding-top">
                    <el-row :gutter="20" class="meal-list">
                        <el-col v-for="(item,index) in mealList" :key="index" :span="8" class="margin-bottom-xs">
                            <div :class="selectedMealIndex===index?'active':''"
                                 class="flex flex-direction align-center justify-center meal-items padding-bottom-xs text-14"
                                 @click="handleSelected(item,index)">
                                <div>{{ item.title }}({{ item.type_name }})</div>
                                <div>{{ item.money }}元</div>
                                <div>{{ item.draw_count }}次数</div>
                                <div v-html="item.description"></div>
                                <div v-if="selectedMealIndex===index" class="icon-tip-box"></div>
                                <el-icon v-if="selectedMealIndex===index" class="icon-tip" color="#fff" size="15">
                                    <Check/>
                                </el-icon>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="pay-list flex align-center justify-center">
                        <div v-for="(item,index) in payListData" :class="paySelectIndex===index?'active':''"
                             class="pay-items" @click="handlePay(index)">
                            {{ item.name }}
                        </div>
                    </div>
                    <div v-if="selectedMealItem" class="flex flex-direction justify-center align-center">
                        <div class="margin-tb-sm text-14 text-red">应付金额:{{ selectedMealItem.money }}</div>
                        <iframe v-if="iframeUrl" :srcdoc="iframeUrl" border="0" frameborder="0" height="200"
                                marginheight="0" marginwidth="0" scrolling="no" style="overflow: hidden;"
                                width="200"></iframe>
                        <template v-else>
                            <img :src="qrCodeUrl">
                        </template>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="充值记录" name="three">
                <el-card class="box-card flex justify-center padding-top">
                    <el-table :data="recordList" style="width: 100%">
                        <el-table-column label="充值记录ID" prop="id" width="180"/>
                        <el-table-column label="创建时间" prop="created_at" width="180"/>
                        <el-table-column label="支付方式" prop="payment_name" width="120"/>
                        <el-table-column align="center" label="支付项标题" prop="payment_item_title" width="100"/>
                        <el-table-column align="center" label="包含次数" prop="payment_item_draw_count"/>
                        <el-table-column label="包名称" prop="payment_item_type"/>
                        <el-table-column label="支付金额" prop="amount"/>
                        <template #empty>
                            暂无数据
                        </template>
                    </el-table>
                    <div v-if="recordList&&recordList.length>0" class="flex justify-center margin-tb">
                        <el-pagination v-model:current-page="recordForm.page" v-model:page-size="recordForm.page_count"
                                       :total="total" background layout="prev, pager, next"
                                       @current-change="handleCurrentChange"/>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts" setup="">
    import topMenu from '../../components/topMenu.vue'
    import useUserStore from '../../store/user'
    import {useRoute} from "vue-router";
    import {nextTick, onMounted, reactive, ref} from 'vue'
    import type {TabsPaneContext} from 'element-plus'
    import {editName, payAlipay, payList, payQuery, userInfo, userPayRecord} from "../../http/user";
    import {ElMessage} from "element-plus";

    const store: any = useUserStore()
    const route = useRoute()
    let type = route.query.type

    const activeName = ref('first')

    if (type) {
        typeof type === "string" ? activeName.value = type : ''
    }

    const userMsg: any = ref({})
    const editNickName = ref(false)

    const has_base_type = ref(0);
    const payListData = ref([]) //支付列表
    const paySelectIndex = ref(null)
    const mealList = ref([]) //套餐列表
    const selectedMealItem = ref(null)
    const selectedMealIndex = ref(null)
    const iframeUrl = ref('') //手机版支付URL
    const pay_no = ref('') //订单号
    const qrCodeUrl = ref('') //电脑版支付二维码
    const timer = ref({}) //查询支付状态倒计时


    const recordForm = reactive({
        page: 1,
        page_count: 10
    })
    const recordList = ref([{
        "id": "475718491148766651",
        "payment_name": "微信支付",
        "payment_item_title": "￥100 / 月",
        "payment_item_draw_count": 600,
        "payment_item_type": "会员包",
        "amount": "100.00",
        "created_at": "2023-04-22 18:18:42"
    }])
    const total = ref(null);

    //获取用户信息
    const getUserInfo = () => {
        userInfo().then(res => {
            const {data} = res;
            userMsg.value = data;
            console.log("getUserInfo===", userMsg)
        })
    }

    //获取支付列表跟套餐
    const getPayList = () => {
        payList().then(res => {
            console.log("res", res)
            const {data} = res;
            has_base_type.value = data.has_base_type
            payListData.value = data.payment_list
            mealList.value = data.payment_item_list
        })
    }

    const getUserPayRecord = () => {
        userPayRecord(recordForm).then(res => {
            console.log("userPayRecord_res", res)
            const {data} = res;
            let list = data.data;
            total.value = data.total
            recordList.value = list
        })
    }

    onMounted(() => {
        getUserInfo();
    })

    //选择套餐
    const handleSelected = (item, index) => {
        selectedMealItem.value = item;
        selectedMealIndex.value = index;
    }

    //选择支付方式
    const handlePay = (index) => {

        // if (paySelectIndex.value === index) return;

        paySelectIndex.value = index;

        console.log("selectedMealItem.id", selectedMealItem.value.id)
        let paramsData = {
            item_id: selectedMealItem.value.id
        };

        payAlipay(paramsData).then(res => {
            console.log("res", res, store.platform)
            const {data} = res;
            if (data.body) {
                iframeUrl.value = data.body
                console.log("iframeUrl.value", iframeUrl.value)
            }
            if (data.qrcode) {
                pay_no.value = data.pay_no
                qrCodeUrl.value = data.qrcode;
                timer.value = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
                    handleQueryPayStatus(data.pay_no);
                }, 5000);
            }
        })
    }

    const handleQueryPayStatus = (pay_no) => {
        let paramsData = {
            pay_no: pay_no
        }
        payQuery(paramsData).then(res => {
            console.log("payQuery", res)
            const {data} = res;
            if (data.is_success == 1) {
                ElMessage({
                    message: '支付成功',
                    type: 'success',
                })
                clearInterval(timer.value);
            }
        })
    }

    const handleEdit = () => {
        let paramsData = {
            nickname: userMsg.value.nickname
        }

        editName(paramsData).then(res => {
            console.log("res", res)
            if (res.code === 0) {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
            }
        })
    }

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        let paneName = tab.paneName
        switch (paneName) {
            case 'first':
                getUserInfo();
                break
            case 'second':
                getPayList();
                break
            case 'three':
                recordForm.page = 1;
                recordList.value = []
                getUserPayRecord();
                break
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/variables.scss";


  ::v-deep .el-tabs__nav-scroll {
    width: 30%;
    margin: 0 auto
  }

  .box-card {
    width: 80%;
    margin: 0 auto;
  }

  .meal-items {
    position: relative;
    width: 2.667rem;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    border: transparent 2px solid;
    cursor: pointer;

    .icon-tip-box {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0;
      height: 0;
      border-bottom: 25px solid $Secondary1;
      border-left: 25px solid transparent;
    }

    .icon-tip {
      position: absolute;
      bottom: 0;
      right: 0;
    }

    &.active {
      border: $Secondary1 2px solid;
      color: $Secondary4;
    }

    & > div {
      margin-top: 0.067rem
    }
  }

  .pay-list {
    margin-top: 30px;

    .pay-items {
      cursor: pointer;
      border-radius: 5px;
      border: #ccc 1px solid;
      padding: 10px 20px;
      margin: 0 10px;

      &.active {
        border: $theme 1px solid;
      }
    }
  }

</style>
